告別傳統的浮動（float）排版，現在主流的 CSS 排版方式是 Flexbox 和 Grid。今天用 Flexbox (Flexible Box Layout) ，它能輕鬆地實現各種複雜的排版，是現代網頁設計的必學技能。

Flexbox 的核心概念是「彈性容器」和「彈性項目」。只需要在父容器上設定 display: flex;，它的子元素就會變成彈性項目，自動按照規則排列。

幾個常用的 Flexbox 屬性：

• display: flex;：開啟 Flexbox 排版。

• flex-direction：設定主軸方向，可以是 row (水平，預設) 或 column (垂直)。

• justify-content：設定主軸上的對齊方式，如 flex-start、flex-end、center、space-between。

• align-items：設定交叉軸上的對齊方式，如 flex-start、flex-end、center。

用 Flexbox 重新排版一個簡單的圖片和文字區塊，讓它們置中對齊。

在 index.html 中：

HTML

<div class="container">
  <div class="box">項目一</div>
  <div class="box">項目二</div>
  <div class="box">項目三</div>
</div>

在 style.css 中：

CSS

.container {
  display: flex;
  justify-content: center; /* 水平置中 */
  align-items: center; /* 垂直置中 */
  height: 200px;
  background-color: #ecf0f1;
}
.box {
  width: 80px;
  height: 80px;
  margin: 10px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 80px;
}

透過 Flexbox，只需要幾行程式碼，就實現了原本可能需要複雜計算才能完成的置中效果。明天介紹另一個排版工具：Grid。

執行成果 :